<template>
  <div class="record">
    <div class="title">
      <div>
        <div class="categoryName">{{ data.categoryNameList.join(" - ") }}</div>
        <span
          >( 正价平均毛利率：{{ !isShow.includes(data.normalPriceGrossMargin) ? data.normalPriceGrossMargin + "%" : "--" }}
          <img :src="Number(data.normalPriceGrossMargin) > 0 ? up : down" alt="" v-if="Number(data.normalPriceGrossMargin)" />
        </span>
        <span
          >特价平均毛利率：{{ !isShow.includes(data.specialPriceGrossMargin) ? data.specialPriceGrossMargin + "%" : "--" }}
          <img :src="Number(data.specialPriceGrossMargin) > 0 ? up : down" alt="" v-if="Number(data.specialPriceGrossMargin)" />
        </span>
        <span
          >综合平均毛利率：{{ !isShow.includes(data.compositeGrossMargin) ? data.compositeGrossMargin + "%" : "--" }}
          <img :src="Number(data.compositeGrossMargin) > 0 ? up : down" alt="" v-if="Number(data.compositeGrossMargin)" />)
        </span>
      </div>
      <img src="@/assets/images/del.png" @click="emit('delete', data)" alt="" v-if="!edit" />
    </div>

    <!-- 定制系数 -->
    <div class="custom-coefficient jzt-flex-st mt20 mb4 ml20" v-if="data.categoryNameList?.length === 1">
      <p>定制系数（按正价进行折扣）</p>
      <el-input-number
        class="jzt-input-number jzt-input-number-hidden mr10 ml10"
        v-model="data.coefficient"
        :min="0"
        controls-position="right"
        style="width: 256px"
        @change="saveCoefficient"
      />
      <el-tooltip class="box-item" effect="light" content="供应价*定价系数+（定制规则项*定制系数）=定制价折扣" placement="bottom">
        <el-icon style="color: #c0c4cc"><QuestionFilled /></el-icon>
      </el-tooltip>
    </div>

    <div class="caption">
      <div>
        <span class="caption-title">商品区间与定价系数设置</span>
        <span> (系统定义：为保持现有成本，不加价不减价，一次推算成本价+系数=售价) </span>
      </div>
      <div class="blue" @click="emit('openInterval', data)" v-if="!edit">
        <el-icon>
          <CirclePlusFilled />
        </el-icon>
        添加/编辑
      </div>
    </div>
    <div class="price-list">
      <el-empty style="margin-top: 20px" v-if="!data?.normalPricing?.pricingList?.length" />
      <div v-else>
        <div class="item" v-for="item in data?.normalPricing?.pricingList" :key="item.coefficientId">
          <div>成本价：{{ item.startPrice }}-{{ item.endPrice }}</div>
          <div>设置为{{ item.coefficientType == 1 ? "正价系数" : "特价系数" }}：{{ item.pricingCoefficient }}</div>
          <div>
            平均毛利润：{{ !isShow.includes(item.averageGrossMargin) ? item.averageGrossMargin + "%" : "--" }}
            <img v-if="Number(item.averageGrossMargin)" :src="Number(item.averageGrossMargin) > 0 ? up : down" alt="" />
          </div>
          <div>原有毛利润值： {{ item.oldAverageGrossMargin + "%" }}</div>
        </div>
      </div>
    </div>
    <div class="caption">
      <div class="caption-title">特殊条件定价</div>
      <div class="blue" @click="emit('openSpecial', data)" v-if="!edit">
        <el-icon>
          <CirclePlusFilled />
        </el-icon>
        添加特殊条件定价
      </div>
    </div>
    <div class="special-list">
      <el-empty style="margin: 20px" v-if="!data.specGroupList?.length" />
      <template v-for="(item, index) in data.specGroupList" :key="item.assemblyId">
        <div class="edit" @click="emit('openSpecial', data, index)">
          {{ !edit ? "编辑" : "查看" }}<img v-if="!edit" src="@/assets/images/edit.png" alt="" />
        </div>
        <div class="item-box">
          <div class="item" v-for="i in item.pricingList" :key="item.coefficientId">
            <div>
              <div>成本价：{{ i.startPrice }}-{{ i.endPrice }}</div>
              <span>被调价商品：{{ i.productNum }}</span>
            </div>
            <div>
              <div>设置为{{ i.coefficientType == 1 ? "正价系数" : "特价系数" }}：{{ i.pricingCoefficient }}</div>
              <span>历史订单数：{{ i.orderNum }}</span>
            </div>
            <div>
              <div>
                平均毛利润：{{ i.averageGrossMargin + "%" }}
                <img v-if="Number(i.averageGrossMargin)" :src="Number(i.averageGrossMargin) > 0 ? up : down" alt="" />
              </div>
              <span>原有毛利润：{{ i.oldAverageGrossMargin }}%</span>
            </div>
            <div>收益增长金额：≈{{ i.revenueGrowthAmount }}</div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script setup>
import { ref, watch } from "vue";
import up from "@/assets/images/up.png";
import down from "@/assets/images/down.png";
import { QuestionFilled } from "@element-plus/icons-vue";

const emit = defineEmits(["openInterval", "openSpecial", "delete", "changeCoefficient"]);
const props = defineProps({
  data: {
    type: Object,
    required: true,
    default: () => ({})
  },
  edit: {
    type: Boolean,
    default: false
  }
});
const isShow = [null, undefined];

const saveCoefficient = val => {
  emit("changeCoefficient", val, props.data);
};
</script>
<style scoped lang="scss">
$topic: #007dff;
$border: 1px solid #e2e8f0;

:deep(.jzt-input-number) {
  .el-input__wrapper {
    background-color: white;
  }
}

.record {
  border-radius: 10px;
  background: #f6f8fa;
  border: $border;
  margin: 20px;

  .title {
    border-bottom: $border;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;

    > div {
      display: flex;
      gap: 10px;
      align-items: center;
      font-size: 12px;
    }
    .categoryName {
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }
  }

  img {
    width: 16px;
    height: 16px;
    cursor: pointer;
  }

  span {
    color: #86909c;
  }

  .caption {
    border-left: 4px solid $topic;
    margin: 20px;
    padding-left: 10px;
    display: flex;
    justify-content: space-between;
    .blue {
      display: flex;
      align-items: center;
      gap: 8px;
      color: $topic;
      cursor: pointer;
    }
    span {
      font-size: 12px;
    }
    .caption-title {
      font-size: 14px;
      font-weight: bold;
      color: #333;
    }
  }

  .price-list,
  .special-list {
    margin: 0 20px 20px;
    background: white;
    border-radius: 10px;

    .item {
      padding: 0 20px;
      height: 40px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      align-content: center;
      border-bottom: $border;

      &:last-child {
        border-bottom: none;
      }
    }
  }

  .special-list {
    overflow: hidden;
    padding-bottom: 20px;

    .edit {
      height: 40px;
      display: flex;
      gap: 8px;
      align-items: center;
      color: $topic;
      padding-left: 20px;
      user-select: none;
    }

    > .item-box {
      border-radius: 10px;
      margin: 0 20px;

      .item {
        height: 80px;
        background: #f6f8fa;

        > div {
          line-height: 30px;
        }

        > div:last-child {
          display: flex;
          align-items: center;
        }
        span {
          font-size: 12px;
        }
      }
    }
  }
}
</style>
